<template>
	<view class="message-view">
		<u-navbar
			title="微信"
			bgColor="#ededed"
			leftIcon=""
			:placeholder="true"
			:titleStyle="{
				fontWeight:700
			}"
		>
			<view class="navbar-right" slot="right">
				<u-icon name="search" size="30"></u-icon>
				<u-icon name="plus-circle" size="24"></u-icon>
			</view>
		</u-navbar>
		<view class="message-view__list">
			<view
				class="list-item"
				v-for="item in messageList"
				:key="item.id"
				@click="handleClickMessage(item)">
				<u-avatar
					class="list-item__avatar"
					size="60"
					shape="square"
					:src="item.avatar">
				</u-avatar>
				<view class="list-item__content">
					<view class="content-left">
						<view class="content-left__name">{{ item.nickname }}</view>
						<view class="content-left__text">{{ item.content }}</view>
					</view>
					<view class="content-time">{{item.sendtime}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageList: [
					{
						id: 1,
						avatar: "https://ps.ssl.qhimg.com/t01ba6ea141fbcb6e8f.jpg",
						nickname: "旧巷里的少女",
						content: "这是一条很长很长很长很长很长的消息内容这是一条很",
						sendtime: "10:49"
					},
					{
						id: 2,
						avatar: "https://ps.ssl.qhimg.com/t013a85c0da3efe86ea.jpg",
						nickname: "青春永不言弃",
						content: "这是一条很长很长很长很长很长的消息内容这是一条很",
						sendtime: "10:49"
					},
					{
						id: 3,
						avatar: "https://ps.ssl.qhimg.com/t017d283540cc9ddfee.jpg",
						nickname: "月冷绰影斜",
						content: "这是一条很长很长很长很长很长的消息内容这是一条很",
						sendtime: "10:49"
					},
					{
						id: 4,
						avatar: "https://ps.ssl.qhimg.com/t01f85b57e967ea5155.jpg",
						nickname: "他们叫我丞",
						content: "这是一条很长很长很长很长很长的消息内容这是一条很",
						sendtime: "10:49"
					},
					{
						id: 5,
						avatar: "https://ps.ssl.qhimg.com/t01f1a752c5c6e75077.jpg",
						nickname: "放肆的沉沦",
						content: "这是一条很长很长很长很长很长的消息内容这是一条很",
						sendtime: "10:49"
					}
				]
			}
		},
		onLoad() {
			console.log('页面加载了')
		},
		onShow() {
			console.log('页面显示了')
		},
		methods: {
			handleClickMessage(item) {
				uni.navigateTo({
					url: `/pages/send/send?nickname=${item.nickname}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message-view {
		&__list {
			.list-item {
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				&__content {
					display: flex;
					align-items: center;
					height: 60px;
					flex: 1;
					margin-left: 30rpx;
					padding: 20rpx 30rpx 20rpx 0;
					border-bottom: 1px solid #f1f1f1;
					.content-left {
						flex: 1;
						width: 0;
						padding-right: 30rpx;
						&__name {
							font-size: 38rpx;
							line-height: 54rpx;
						}
						&__text {
							color: #b3b3b3;
							font-size: 28rpx;
							margin-top: 8rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
					.content-time {
						position: relative;
						top: -30rpx;
						color: #b3b3b3;
						font-size: 26rpx;
						flex-shrink: 0;
					}
				}
			}
		}
	}
	.navbar-right {
		display: flex;
		align-items: center;
	}
</style>
